<template>
  <ion-page>
    <ion-header class="ion-no-border">
      <ion-toolbar>
        <ion-buttons slot="start">
          <ion-back-button color="dark" text=""></ion-back-button>
        </ion-buttons>
        <ion-title>设置</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content :fullscreen="true">
      <ion-card>
        <ion-card-header>个人资料设置</ion-card-header>
        <ion-card-content>
          <ion-row class="ion-padding border_bottom" @click="presentActionSheet">
            <ion-col class="ion-align-items-center d-f ion-justify-content-between">
              <span class="ion-margin-start">头像</span>
              <div class="d-f ion-align-items-center">
                <img v-if="imagePath===''" src="../../public/assets/images/14.jpg" style="width: 50px;height: 50px;border-radius: 50px"/>
                <img v-else :src="imagePath" style="width: 60px;height: 60px;border-radius: 50px"/>
                <span class=" ion-margin-start">&gt;</span>
              </div>
            </ion-col>
          </ion-row>
          <ion-row class="ion-padding border_bottom" @click="() => router.push('/tabs/password')">
            <ion-col class="ion-align-items-center d-f ion-justify-content-between">
              <span class="ion-margin-start">昵称</span>
              <span>&gt;</span>
            </ion-col>
          </ion-row>
        </ion-card-content>
      </ion-card>
      <ion-row class="ion-padding">
        <ion-col>
          <ion-button @click="doLogout" expand="block" color="medium">退出帐号</ion-button>
        </ion-col>
      </ion-row>
    </ion-content>
  </ion-page>
</template>

<script lang="ts">
import { defineComponent,inject } from 'vue';
import { useRouter } from 'vue-router';
import { Camera, CameraOptions } from '@awesome-cordova-plugins/camera';
import app from "@/main"
import {
  IonHeader,
  IonToolbar,
  IonTitle,
  IonInput,
  IonPage,
  IonCard,
  IonItem,
  IonIcon,
  IonButton,
  IonCardContent,
  IonContent,
  IonSearchbar,
  IonCardHeader,
  IonRow,
  IonCol,
  IonSegment,
  IonSegmentButton,
  IonLabel,
  IonAvatar,
  IonImg,
  IonBackButton,
  IonButtons,
  IonListHeader,
  IonChip,
  useIonRouter,
  actionSheetController
} from '@ionic/vue';
import {callOutline, reorderFourOutline, lockClosedOutline, cameraOutline,imageOutline,closeOutline} from 'ionicons/icons';
import {Storage} from "@ionic/storage";
export default defineComponent({
  name: 'SettingPage',
  components: {
    IonHeader,
    IonToolbar,
    IonTitle,
    IonInput,
    IonPage,
    IonCard,
    IonItem,
    IonIcon,
    IonButton,
    IonCardContent,
    IonContent,
    IonSearchbar,
    IonCardHeader,
    IonRow,
    IonCol,
    IonSegment,
    IonSegmentButton,
    IonLabel,
    IonAvatar,
    IonImg,
    IonBackButton,
    IonButtons,
    IonListHeader,
    IonChip,
  },
  data() {
    return {
      imagePath:''
    }
  },
  setup() {
    const router = useRouter();
    const reload:any = inject('reload')
    const ionRouter = useIonRouter();
    return {
      lockClosedOutline,
      callOutline,
      reorderFourOutline,
      router,
      app,
      ionRouter,
      reload,
    }
  },
  methods:{
    async doLogout(){
      const storage = new Storage();
      await storage.create();
      await storage.remove('username')
      await storage.remove('password')
      app.config.globalProperties.$currentUser=null;
      app.config.globalProperties.$goBack=1;
      // this.ionRouter.navigate('/tabs/home', 'forward', 'replace');
      this.$router.back()
      this.reload.call();
    },
    async presentActionSheet() {
      const actionSheet = await actionSheetController
        .create({
          header: '选择照片',
          cssClass: 'my-custom-class',
          buttons: [
            {
              text: '拍照',
              data: 10,
              icon:cameraOutline,
              handler: () => {
                this.openCamera();
              },
            },
            {
              text: '相册',
              data: 'Data value',
              icon:imageOutline,
              handler: () => {
                this.openAllmedia();
              },
            },
            {
              text: '取消',
              role: 'cancel',
              icon:closeOutline,
              data: {
                type: 'delete'
              },
              handler: () => {
                console.log('Cancel clicked')
              },
            },
          ],
        });
      await actionSheet.present();

      const { role, data } = await actionSheet.onDidDismiss();
    },
    openCamera(){
      const options: CameraOptions = {
        quality: 100,
        destinationType: Camera.DestinationType.DATA_URL,
        encodingType: Camera.EncodingType.JPEG,
        mediaType: Camera.MediaType.PICTURE
      }

      Camera.getPicture(options).then((imageData) => {
        this.imagePath = 'data:image/jpeg;base64,' + imageData;
      }, (err) => {
        // Handle error
      });
    },
    openAllmedia(){
      const options: CameraOptions = {
        quality: 100,
        destinationType: Camera.DestinationType.DATA_URL,
        encodingType: Camera.EncodingType.JPEG,
        mediaType: Camera.MediaType.PICTURE,
        sourceType:Camera.PictureSourceType.PHOTOLIBRARY
      }

      Camera.getPicture(options).then((imageData) => {
        // imageData is either a base64 encoded string or a file URI
        // If it's base64 (DATA_URL):
        this.imagePath = 'data:image/jpeg;base64,' + imageData;
      }, (err) => {
        // Handle error
      });
    }
  }
});
</script>

<style scoped>
ion-content{
  --background: #f5f6f9;
}
</style>
